<template>
  <div class="app-wrapper">
    <ButtonGroup :btn-show="btnShow" :btn-data="btnData" style="margin-top:15px" @BtnClick="BtnClick" />
    <InlineEditTable ref="child" :table-height="tableHeight" :table-node="node" />

    <el-dialog :visible.sync="dialogBtnVisible" class="btn" width="900px" top="2vh">
      <div slot="title">
        <div style="margin:0;font-size:18px;">按钮配置</div>
        <div class="tips">
          <font-awesome-icon :icon="['far', 'lightbulb']" fixed-width /><span>温馨提示：点击模块中的多选框，可以同时保存多个模块的按钮配置,而且保存时，至少要选中一个</span>
        </div>
      </div>
      <Sidebar ref="sidebarChild" class="table-sidebar-container" :tree-data="treeData" @selectBtnList="selectBtnList" />
      <div class="btn-group">
        <h3 style="margin:0 0 3px 0;width:300px">当前模块：{{ moduleName }}</h3><el-button v-if="btnsHide" style="transform: translateX(190px);" type="primary" size="mini" @click="checkedAll">全选</el-button>
        <div v-if="btnsHide">
          <el-button v-for="btnItem in btnList" :key="btnItem.id" :type="btnItem.backColor | btnFilter" size="small" @click="checked(btnItem)"><font-awesome-icon v-if="btnItem.iCon" :icon="btnItem.iCon | btnIconFilter" fixed-width />{{ btnItem.btnName }}<font-awesome-icon v-if="btnItem.select" class="iconcheck" :icon="['fas','check']" fixed-width /></el-button>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogBtnVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="EditModuleBtnList">
          确认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ButtonGroup from '@/components/ButtonGroup'
import InlineEditTable from './components/InlineEditTable'
import Sidebar from './components/Sidebar'
import { GetModule, GetModuleBtns, GetBtns, EditModuleBtn, btnMap, IconFilter } from '@/api/system'

function filterLeft(lists, selectRes) {
  const res = []
  lists.forEach(list => {
    const tmp = { ...list }
    tmp.title = list.moduleName || ''
    tmp.expanded = false
    tmp.checked = false
    selectRes.forEach(select => {
      if (select.moduleID === tmp.id && tmp.type === 2) {
        tmp.checked = true
        tmp.list = select.list
      }
    })
    if (tmp.child && tmp.child.length > 0) {
      tmp.children = filterLeft(tmp.child, selectRes)
    }
    res.push(tmp)
  })
  return res
}

function filterLeftChecket(lists, id, btnId, checked) {
  const res = []
  lists.forEach(list => {
    const tmp = { ...list }
    if (tmp.id === id) {
      if (!tmp.list) {
        list.list = []
      }
      if (checked) {
        console.log(btnId)
        list.list.push(btnId)
        list.checked = true
      } else {
        const btnIndex = tmp.list.indexOf(btnId)
        if (btnIndex !== -1) {
          tmp.list.splice(btnIndex, 1)
        }
      }
    }
    if (tmp.children && tmp.children.length > 0 && tmp.id !== id) {
      filterLeftChecket(tmp.children, id, btnId, checked)
    }
    res.push(tmp)
  })
  return res
}

function filterLeftChecketAll(lists, id, btnIds, checked) {
  const res = []
  lists.forEach(list => {
    const tmp = { ...list }
    if (tmp.id === id) {
      if (!tmp.list) {
        list.list = []
      }
      if (checked) {
        list.checked = true
      }
      list.list = btnIds
    }
    if (tmp.children && tmp.children.length > 0 && tmp.id !== id) {
      filterLeftChecketAll(tmp.children, id, btnIds, checked)
    }
    res.push(tmp)
  })
  return res
}

function filterSave(lists) {
  let res = []
  lists.children.forEach(list => {
    const tmp = { ...list }
    if (tmp.checked) {
      if (!tmp.list) {
        tmp.list = []
      }
      res.push({ moduleID: tmp.id, list: tmp.list })
    }
    if (tmp.children && tmp.children.length > 0) {
      const re = filterSave(tmp)
      if (re.length > 0) {
        res = [...res, ...re]
      }
    }
  })
  return res
}
export default {
  name: 'AdminButton',
  components: {
    ButtonGroup,
    InlineEditTable,
    Sidebar
  },
  filters: {
    statusFilter(status) {
      const statusMap = status ? 'success' : 'danger'
      return statusMap
    },
    btnFilter(type) {
      return btnMap[type]
    },
    btnIconFilter(icon) {
      return IconFilter(icon)
    }
  },
  data() {
    return {
      checkedAllBtn: false,
      moduleName: '',
      btnList: [],
      btnListArray: [],
      btnsHide: false,
      treeData: [{
        title: 'node1',
        expanded: true,
        children: []
      }],
      selectRes: [],
      tableHeight: 500,
      node: {},
      treeNode: {},
      dialogBtnVisible: false,
      btnShow: true,
      btnData: [
        { type: 'primary', name: '刷新', icon: ['fas', 'sync'] },
        { type: 'success', name: '新增', icon: ['fas', 'plus'] },
        { type: 'warning', name: '配置', icon: ['fas', 'cog'] }
      ]
    }
  },
  mounted() {
    setTimeout(() => {
      this.setTableHeight()
    }, 100)
    window.addEventListener('resize', this.setTableHeight)
    this.getTreeData()
    this.GetBtnList()
  },
  methods: {
    setTableHeight() {
      this.tableHeight = document.querySelector('.app-wrapper').offsetHeight - 200
    },
    BtnClick(name) {
      if (name === '新增') {
        this.$refs.child.handleCreate()
      }
      if (name === '刷新') {
        this.$refs.child.getList()
      }
      if (name === '配置') {
        this.dialogBtnVisible = true
        this.getTreeData()
      }
    },
    async getTreeData() {
      var response = await GetModule()
      var selectRes = await GetModuleBtns()
      this.selectRes = selectRes.data
      response.data = [
        {
          title: 'nm',
          id: 1,
          type: 1,
          expanded: true,
          children: filterLeft(response.data, selectRes.data)
        }
      ]
      this.treeData = response.data
    },
    GetBtnList() {
      GetBtns().then(response => {
        this.btnList = response.data.map(btn => {
          this.btnListArray.push(btn.id)
          btn.select = false
          return btn
        })
      })
    },
    async EditModuleBtnList() {
      const btns = await filterSave(this.treeData[0])
      EditModuleBtn(btns).then(res => {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
      })
    },
    selectBtnList(node, title) {
      this.moduleName = node.title
      const checkedBtn = nodeItem => {
        var btnList1 = this.btnList
        this.btnList = []
        btnList1.map(btn => {
          btn.select = false
          if (nodeItem.list && nodeItem.list.length > 0 && nodeItem.list.indexOf(btn.id) !== -1) {
            btn.select = true
          }
        })
        this.btnList = btnList1
      }
      if (node) {
        this.treeNode = node
        if (node.type === 2) {
          this.btnsHide = true
          checkedBtn(node)
        } else {
          this.btnsHide = false
        }
      }
    },
    checked(node) {
      node.select = !node.select
      if (node.select) {
        filterLeftChecket(this.treeData, this.treeNode.id, node.id, true)
      } else {
        filterLeftChecket(this.treeData, this.treeNode.id, node.id, false)
      }
    },
    checkedAll() {
      this.btnList.forEach(element => {
        element.select = !this.checkedAllBtn
      })
      this.checkedAllBtn = !this.checkedAllBtn
      if (this.checkedAllBtn) {
        filterLeftChecketAll(this.treeData, this.treeNode.id, this.btnListArray, true)
      } else {
        filterLeftChecketAll(this.treeData, this.treeNode.id, [], false)
      }
    }
  }
}
</script>

<style>
.table-sidebar-container {
  transition: width 0.28s;
  width: 300px !important;
  height: 420px;
  z-index: 1001;
  border-right: solid 1px #e6e6e6;
  overflow: hidden;
}
.tips {
  padding: 5px;
  border-bottom: 1px solid #e5e5e5;
  background: #fffdcd;
  color: #bc7b21;
  font-size: 14px;
}
.el-dialog__body {
  padding-top: 10px;
}
.btn .el-dialog__body {
  display: flex;
  padding-top: 0;
  padding-bottom: 5px;
}
.btn .el-dialog__body .table-sidebar-container {
  border-bottom: 1px dotted #ccccdd;
}
.btn .btn-group {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  width: calc(100% - 300px);
  height: 420px;
  z-index: 1001;
  border: solid 1px #e6e6e6;
  margin: 0;
  border-left: 0;
  padding-top: 10px;
  padding-left: 5px;
}
.btn .btn-group button {
  margin: 0 5px 5px 0;
  position: relative;
}
.iconcheck {
  position: absolute;
  right: 0;
  bottom: 0px;
}
.halo-tree .tree-node-el {
  background-color: rgba(0, 0, 0, 0);
}
</style>
